<template>
	<view>
		<view class="padding">
			<view class="padding-sm radius-xl bg-white margin-bottom-sm">
				<view class="title margin-bottom-xs">
					<text class="cuIcon-titles themeColor"></text>订单信息
				</view>
				<view class="pro-item">
					<view class="project padding-tb-xs" v-for="(item,index) in info.orderDetails" :key="index">
						<image :src="item.good.image" mode="aspectFill" class="image"></image>
						<view class="proBox padding-left-sm">
							<view class="nameandtime">
								<view class="name text-bold text-black">{{item.good.name}}</view>
								<view class="time text-gray text-sm" v-if="item.good.duration">{{item.good.duration}}分钟</view>
							</view>
							<view class="desc text-sm text-gray margin-bottom-sm">{{item.good.desc}}</view>
							<view class="cost">
								<view class="text-red text-bold">￥{{item.good.price}}</view>
								<view class="num text-gray">x{{item.count}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="orderinfo padding-xs text-sm">
					<view class="crow margin-bottom-xs">
						<view class="name">服务阿姨</view>
						<view class="content" v-if="info.staff">
							<view class="cu-avatar sm round margin-left" :style="{backgroundImage: 'url('+info.staff.avatar_url+')'}"></view>
							<text class="padding-left-xs">{{info.staff.nickname}}</text>
						</view>
					</view>
					<view class="crow margin-bottom-xs">
						<view class="name">订单编号</view>
						<view class="content">
							<text>{{info.order_no}}</text>
						</view>
					</view>
					<view class="crow">
						<view class="name">支付金额</view>
						<view class="content">
							<text class="text-red text-bold">¥ {{info.pay_amount}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 退款须知 -->
			<view class="padding-sm radius-xl bg-white user-notice margin-bottom-sm">
				<view class="title margin-bottom-xs">
					<text class="cuIcon-titles themeColor"></text>退款须知
				</view>
				<view class="padding-tb-xs list text-sm">
					<view class="item padding-bottom-sm solid-bottom">
<!--						<image src="@/static/image/order/no_go.png" mode=""></image>-->
						<view class="content margin-left-sm">
							<view class="title text-bold text-black padding-bottom-xs">阿姨未出发</view>
							<view class="desc text-gray">退全款</view>
						</view>
					</view>
					<view class="item padding-tb-sm solid-bottom">
<!--						<image src="@/static/image/order/order_go.png" mode=""></image>-->
						<view class="content margin-left-sm">
							<view class="title text-bold text-black padding-bottom-xs">阿姨已出发</view>
							<view class="desc text-gray">退项目费用（扣除出行费用）</view>
						</view>
					</view>
					<view class="item padding-top-sm">
<!--						<image src="@/static/image/order/order_arrive.png" mode=""></image>-->
						<view class="content margin-left-sm">
							<view class="title text-bold text-black padding-bottom-xs">阿姨已到达</view>
							<view class="desc text-gray">退项目半款</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 退款原因 -->
			<view class="apply_reason padding-sm bg-white radius-xl margin-bottom">
				<view class="title margin-bottom-xs">
					<text class="cuIcon-titles themeColor"></text>退款原因
				</view>
				<view>
					<textarea maxlength="255"  placeholder="在此输入备注信息" v-model="form.back_reason" class="textarea"></textarea>
				</view>
			</view>
      <view class="apply_reason padding-sm bg-white radius-xl margin-bottom">
        <view class="title margin-bottom-xs">
          <text class="cuIcon-titles themeColor"></text>上传截图
        </view>
        <view>
          <u-upload :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
        </view>
      </view>
			<view class="submit">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round"  @click="submit()">确认提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        action: this.$baseUrl + '/api/upload/file',
        fileList: [],
				form:{
          back_img: '',
          back_reason:'',
					orderId: ''
				},
				info:{
          orderDetails: []
        }
			};
		},
		onLoad(options) {
			this.form.orderId = options.orderId;
      this.$http.getOrderDetail({
        id:options.orderId
      }).then(res=>{
        let item = res
        item.buttonShow = {
          // 退款
          refund: false,
          // 取消
          cancel: false,
          // 删除
          delete: false,
          // 评价
          comment: false,
          // 支付
          pay: false,
        }
        // 设置状态
        if (item.pay_status === 0) {
          item.statusText = {
            color: 'orange',
            value: '待支付',
          }
          item.buttonShow.pay = true
          item.buttonShow.cancel = true
        } else if (item.pay_status === 1) {
          if (item.order_status === 0) {
            item.statusText = {
              color: 'orange',
              value: '待接单',
            }
            item.buttonShow.refund = true
          } else if (item.order_status === 1) {
            item.statusText = {
              color: 'orange',
              value: '已接单',
            }
          } else if (item.order_status === 2) {
            item.statusText = {
              color: 'orange',
              value: '服务中',
            }
          } else if (item.order_status === 3) {
            item.statusText = {
              color: 'green',
              value: '已完成',
            }
            item.buttonShow.comment = true
            item.buttonShow.delete = true
          } else if (item.order_status === -1) {
            item.statusText = {
              color: 'grey',
              value: '已取消',
            }
            item.buttonShow.delete = true
          }
        }
        this.info = item;
      })
		},
		methods:{
      successFile(e) {
        this.form.back_img = e.data.url
      },
      removeFile() {
        this.form.back_img = ''
      },
      successFile2(e) {
        this.form.back_zfb_img = e.data.url
      },
      removeFile2() {
        this.form.back_zfb_img = ''
      },
			submit(){
        uni.showLoading({
          title: '提交中...'
        })
        this.$http.updateOrder({
          id: this.form.orderId,
          back_reason: this.form.back_reason,
          back_img: this.form.back_img,
          pay_status: 2
        }).then(res=> {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },800)
        })
			}
		}
	}
</script>

<style lang="less" scoped>
.pro-item{
	// background-color: #fffbf5;
	.project{
		display: flex;
		.image{
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}
		.proBox{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nameandtime,.cost{
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
.orderinfo{
	.crow{
		justify-content:space-between
	}
}
.user-notice{
	.list{
		.item{
			display: flex;
			align-items: center;
			image{
				width: 40upx;
				height: 40upx;
			}
			.content{
				.desc{
					// font-size: 26upx;
				}
			}
		}
	}
}
.apply_reason{
	.textarea{
		width: 100%;
		height: 150upx;
		font-size: 26upx;
	}
}
</style>
